<template>
	<view style='padding-bottom: 20rpx;'>
		
			<shopro-empty v-if="data.length<1" :emptyData="emptyData"></shopro-empty>
			<view class="u-tab-item1"  v-for="(item,index) in shopdata" :key="index">
				<view class="order_xx">
					<text class="dingdan">订单号:{{item.number}}</text>
					<text class="dingdan">{{item.create_time}}</text>
				</view>
				<view class="shop_a">
					<view v-for="(item1,index1) in item.goods" class="shop_xx">
						<image
							:src="'https://whb.qianjitianxia.com'+item1.figure"
							mode="aspectFill"
						></image>
						<view class="shop_xx1">
							<text>{{item1.name}}</text>
							<view>
								<text style="color: #FF0000;">价格:￥{{item1.price}}</text>
								<text style="font-size: 24rpx;color: #999999;">*{{item1.num}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="shop_dz">
					<view>地址：{{item.site}}{{item.address}}</view>
					<view class="shop_dz1">
						<text>商品：共{{item.total_number}}件</text>
						<text>电话：{{item.phone}}</text>
					</view>
					<view></view>
					<view style="font-size: 30rpx;color: #FF0000;text-align: right;">总价：{{item.money}}</view>
				</view>
			</view>
		
		<!-- 加载更多 -->
		<u-loadmore :status="status" :loadText="loadText"/>
		<!-- 自定义底部导航 -->
		<shopro-tabbar></shopro-tabbar>
		<!-- 关注弹窗 -->
		<shopro-float-btn></shopro-float-btn>
		<!-- 连续弹窗提醒 -->
		<shopro-notice-modal></shopro-notice-modal>
		<!-- 登录提示 -->
		<shopro-login-modal></shopro-login-modal>
	</view>
</template>

<script>
import { mapState, mapActions } from 'vuex';
export default {
	components: {},
	data() {
		return {
			curNow: 0,
			uid: '',
			shopdata:[],
			emptyData: {
				img: '/static/imgs/empty/empty_groupon.png',
				tip: '暂无订单，还有更多好货等着你噢~'
			},
			status:'nomore',
			loadText:{
				loadmore: '点击或上拉加载更多',
				loading: '正在加载...',
				nomore: '没有更多了'
			},
			param:{
				uid:'',
				page:1,
				limit:10,
				sid:''
			},
			total:''
		};
	},
	computed: {
		...mapState({
			initData: state => state.init.initData //初始化数据
		})
	},
	onLoad() {
		const value = uni.getStorageSync('sid');
		if(value){
			this.param.sid=value.sid
		}
		this.getUsers();
		
	},
	onReachBottom(){
		if(this.shopdata.length==this.total){
			this.status='nomore'
		}else{
			this.param.page++
			this.ordrLst()
		}
	},
	methods: {
		// tabs通知swiper切换
		sectionChange(index) {
			console.log('index :>> ', index);
			this.curNow = index;
		},
		// 路由跳转
		jump(path, parmas) {
			this.$Router.push({
				path: path,
				query: parmas
			});
		},
		//订单
		async ordrLst() {
			const res = await this.$api('ordrLst',this.param);
			this.shopdata=[...this.shopdata,...res.info]
			this.total=res.total
			console.log(this.shopdata)
			console.log('订单 :>> ', res);
		},
		// 获取用户的id
		async getUsers() {
			const res = await this.$api('user.info');
			this.uid  = res.data.id;
			this.param.uid=res.data.id
			this.ordrLst();
		},

		// 退出登录
		outLogin() {
			this.$store.commit('OUT_LOGIN');
			this.$Router.replace('/pages/public/login');
		},
		// 当前版本
		onVersion() {
			let version = this.initData.info.version;
			this.$tools.toast('当前版本:' + version);
		}
	}
};
</script>

<style lang="scss">
page {
	background: #F5F5F5;
	display: flex;
	flex-flow: column;
	justify-content: flex-start;
	align-items: center;
}
.u-tab-item1:first-child{
	margin-top: 30rpx;
}
.u-tab-item1 {
	width: 690rpx;
	background-color: #FFFFFF;
	margin-top: 20rpx;
	border-radius: 10rpx;
	.order_xx{
		height: 62rpx;
		font-size: 24rpx;
		color: #999999;
		padding: 0 20rpx;
		width: 100%;
		display: flex;
		flex-flow: row;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #F5F5F5;
	}
	.shop_a{
		padding: 20rpx;
		.shop_xx{
			margin-bottom: 20rpx;
			display: flex;
			flex-flow: row;
			justify-content: flex-start;
			image {
				width: 150rpx;
				height: 150rpx;
				margin-right: 20rpx;
				border-radius: 20rpx;
			}
			.shop_xx1{
				width: 100%;
				height: 150rpx;
				display: flex;
				flex-flow: column;
				justify-content: space-between;
				font-size: 30rpx;
				color: #333333;
				view{
					display: flex;
					flex-flow: row;
					justify-content: space-between;
					align-items: center;
				}
			}
		}
		.shop_xx:last-child{
			margin-bottom: 0;
		}
	}
	.shop_dz{
		border-top: 1px solid #F5F5F5;
		padding: 20rpx;
		font-size: 24rpx;
		color: #999999;
		line-height: 36rpx;
		view{
			margin-bottom: 20rpx;
		}
		view:last-child{
			margin-bottom: 0;
		}
		.shop_dz1{
			display: flex;
			flex-flow: row;
			justify-content: space-between;
			align-items: center;
		}
	}
}
</style>
